<template>
  <div class="main">
    <!-- 头部 -->
    <div class="header-box1">
      <p @click="goPosition">{{address}}</p>
      <p>宏烨找房</p>
      <img src="@/assets/b.webp" width="100%" height="100%" alt />
    </div>
    <div class="main-container">
      <!--导航nav  @click-->
      <div class="header-box2">
        <ul>
          <li>
            <img src="@/assets/c.webp" alt @click="goHome()" />
            <p>新房</p>
          </li>
          <li>
            <img src="@/assets/d.webp" alt @click="goHome()" />
            <p>商铺</p>
          </li>
          <li>
            <img src="@/assets/e.webp" alt @click="goHome()" />
            <p>写字楼</p>
          </li>
          <li>
            <img src="@/assets/f.webp" alt @click="goHome()" />
            <p>找小区</p>
          </li>
        </ul>
        <ul>
          <li>
            <img src="@/assets/g.webp" alt />
            <p>商铺</p>
          </li>
          <li>
            <img src="@/assets/h.webp" alt />
            <p>经纪人</p>
          </li>
          <li>
            <img src="@/assets/i.webp" alt />
            <p>咨询</p>
          </li>
          <li>
            <img src="@/assets/j.webp" alt />
            <p>地图</p>
          </li>
        </ul>
      </div>
      <!-- <p>最新动态：会计法还是科技的妇女</p> -->
      <!-- 小导航 router-link-->
      <div class="header-nav2">
        <ul>
          <li>
            <img src="@/assets/1.webp" alt />
            <p>
              <router-link to="/my">房贷计算</router-link>
            </p>
          </li>
          <li>
            <img src="@/assets/2.webp" alt />
            <p>
              <router-link to="/my">我要出租</router-link>
            </p>
          </li>
          <li>
            <img src="@/assets/3.webp" alt />
            <p>
              <router-link to="/my">我要卖房</router-link>
            </p>
          </li>
          <li>
            <img src="@/assets/4.webp" alt />
            <p>
              <router-link to="/my">查询房价</router-link>
            </p>
          </li>
        </ul>
      </div>
      <!-- 轮播图 -->
      <div class="header-box3">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item>
            <img src="@/assets/i.webp" alt />
          </van-swipe-item>
          <van-swipe-item>
            <img src="@/assets/1.webp" alt />
          </van-swipe-item>
          <van-swipe-item>
            <img src="@/assets/i.webp" alt />
          </van-swipe-item>
          <van-swipe-item>
            <img src="@/assets/1.webp" alt />
          </van-swipe-item>
        </van-swipe>
      </div>
      <!-- 粘性布局(tab切换) -->
      <van-tabs v-model="active" sticky @click="changeData" offsetTop="40">
        <van-tab v-for="(item,index) in tab" :key="index" :title="item">
          <dl v-for="(item,index) in list" :key="index" class="classifyType-item">
            <dt>
              <img :src="item.img" alt />
            </dt>
            <dd>
              <p class="p1">
                <span>{{item.state}}</span>
                <b>{{item.listingTitle}}</b>
              </p>
              <!-- <p>{{item.Speciallabel}}</p> -->
              <p class="p2">
                <span>{{item.area}}</span>|
                <span>建面:{{item.houseArea}}</span>
              </p>
              <p class="p3">
                <span>{{item.sellingprice}}元/㎡</span>
              </p>
              <p class="p4">
                <span class="span1">{{item.fitment}}</span>
                <span>{{item.stateType}}</span>
                <span>{{item.fitmentType}}</span>
              </p>
            </dd>
          </dl>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import { getRecommend } from "@/api/index.js";
export default {
  name: "public",
  data() {
    return {
      active: 0,
      tab: ["新房", "二手房", "商铺", "写字楼", "租房"],
      list: []
    };
  },
  created() {
    this.getRecommend();
  },
  computed: {
    ...mapState(["address"])
  },
  methods: {
    goHome() {
      this.$router.push("/houselist");
    },
    goPosition() {
      this.$router.push("/position");
    },
    getRecommend() {
      getRecommend({ classifyType: this.active + 1 }).then(res => {
        this.list = res.data.data.res;
        console.log(res);
      });
    },
    changeData(e) {
      this.active = e;
      console.log(this.active);
      this.getRecommend();
    }
  }
};
</script>
<style scoped>
.main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: rgb(223, 220, 220);
}
/* 头部 */
.header-box1 {
  width: 100%;
  height: 50px;
  line-height: 50px;
  display: flex;
  padding: 5px 15px;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
  background: #fff;
}
.main-container {
  flex: 1;
  overflow-y: scroll;
}
.header-box1 > img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
/* 导航nav */
.header-box2 {
  width: 100%;
  height: 200px;
  background: #fff;
  margin: 20px 0;
}
.header-box2 > ul {
  display: flex;
  /* padding-left: 20px; */
}
.header-box2 > ul > li {
  margin: 10px 25px;
  text-align: center;
}
.header-box2 > ul > li > img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

/* 轮播 */
.my-swipe .van-swipe-item > img {
  width: 100%;
  height: 200px;
}
/* tab切换 */
.van-tabs {
  margin-top: 15px;
  background: #fff;
}
.active {
  color: red;
}
dl {
  display: flex;
  padding: 0 15px;
}
dl > dt {
  margin-right: 15px;
}
dl > dt > img {
  width: 100px;
  height: 100px;
}
.p1 > span {
  background: #ccc;
  margin-right: 5px;
  margin-right: 5px;
}
.p2 {
  margin: 5px 0;
}
.p2 > span {
  border: none;
  margin-right: 5px;
}
.p3 {
  margin-bottom: 5px;
}
.p3 > span {
  border: none;
}
/* .p4>span{
  border: 1px solid #ccc;
} */
/* 小导航 */
.header-nav2 {
  width: 100%;
  height: auto;
  background: #fff;
  padding: 20px 0;
}
.header-nav2 > ul {
  display: flex;
}
.header-nav2 > ul > li {
  margin: 0 19px;
  text-align: center;
}
.header-nav2 > ul > li > img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
</style>